<!DOCTYPE html>
<html lang="zh">
{include file="public/head"}
<style type="text/css">
.card{float: left;margin-left: 20px}
.list-page {text-align:center;padding: 15px 15px;}
  .mws-panel-content {background: #eee;}
  .pagination {margin:0 !important;padding: 10px 10px;box-shadow: 0px 1px 2px 0px #E2E2E2;background: #fff;}
  .pagination li{border:1px solid #e6e6e6;padding: 3px 8px;display: inline-block;}
  .pagination .active{background-color: #46A3FF;color: #fff;}
  .pagination .disabled{color: #aaa;}
</style>
<body>
<div class="card-body">
    <div class="d-flex align-items-center">
      <div class="flex-shrink-0" style="height: 630px">
        <ul class="nav flex-column border-end">
          {volist name="img_type" id="v"}
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/admin/common/selectImage?type={$v.id}"><img data-v-0253d21b="" src="" alt="" class="m-r-10" style="width: 20px; height: 16px;">&nbsp;&nbsp; {$v.name}({$v.total})</a>
          </li>
         {/volist}
        </ul>
      </div>
      <div class="tab-content" id="v-pills-tabContent">
          <div class="mb-3 col-md-12" style="margin-left: 25px;margin-top: -70px">
              <button class="btn btn-primary" type="submit">上传文件</button>

              <button class="btn btn-primary" type="submit">大文件分片上传</button>
          </div>
          {volist name="list" id="v"}
            <div class="card card_img_{$v.id}" style="width: 9rem;">
              <img src="{$v.file_path}" class="card-img-top" style="width: 120px;height: 120px;margin:0 auto">
              <ul class="list-group list-group-flush">
                <li class="list-group-item">{$v.size}.kb - ({$v.mine})</li>
                <!-- <li class="list-group-item">类型：{$v.mine}</li> -->
                <!-- <li class="list-group-item">时间：{$v.create_time|date="Y-m-d H:i:s"}</li> -->
              </ul>
              <div class="card-body">
                <input type="hidden" value="{$v.file_path}" class="select_img_{$v.id}">
                <button class="btn btn-primary btn-sm chose_img" type="button" data-id="{$v.id}">选择</button>
                <button class="btn btn-danger btn-sm del_img" type="button" data-id="{$v.id}">删除</button>
              </div>
            </div>
          {/volist}
      </div>
    </div>
    {$list|raw}
</div>
{include file="public/script"}
<script type="text/javascript">
//选中图片时
$('.chose_img').click(function(){
    var data_id  = $(this).attr('data-id');
    var img_path = $('.select_img_'+data_id).attr('value');
    //向父页面传值
    $(".show_upload_file",window.parent.document).attr('src', img_path);
    $(".file_path_value",window.parent.document).val(img_path);

    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
})

//删除图片
$('.del_img').click(function(){
    var data_id  = $(this).attr('data-id');
    $.post('/admin/common/delImage',{id:data_id}, function(res){
        if(res.code == 200)
        {
            $('.card_img_'+data_id).remove();
        }else{
            showNotify(res.msg, 'danger', 1000, 'mdi mdi-emoticon-happy', 'top', 'right');
        }
    })
})
</script>
</body>
</html>